
/*基础样式开始*/

    /*基础格式开始*/
html,body{
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    height: auto;
    overflow-x: hidden;
    font-size: 16px;
}

div.yinji_templates_PictureStory_box{
    width: 100%;
    height: auto;
    background-color: #fefefe;
    overflow: hidden;
}

div.yinji_templates_PictureStory_box textarea, div, i, p, span {
    font-family: -apple-system, sans-serif, 'Droidsansfallback', 'Droid Sans', "Heiti SC", "Microsoft YaHei", Helvetica, "Helvetica Neue", 'Dengxian', 'Segoe';
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_head{
    width: 100%;
    height: auto;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_head div.cover{
    width: 100%;
    height: auto;

    position: relative;
    top: 0%;
    left: 0%;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_head div.cover:before{
    content: '';
    width: 100%;
    height: .4rem;
    display: block;
    line-height: 1;
    font-size: 0;
    background-color: #fefefe;
}

@keyframes cover_pic_animation
{
    0%   {

        opacity: 0;

    }

    100% {

        opacity: 1

    }
}

@-moz-keyframes cover_pic_animation /* Firefox */
{
    0%   {

        opacity: 0;

    }

    100% {

        opacity: 1

    }
}

@-ms-keyframes cover_pic_animation
{
    0%   {

        opacity: 0;

    }

    100% {

        opacity: 1

    }
}

@-webkit-keyframes cover_pic_animation /* Safari 和 Chrome */
{
    0%   {

        opacity: 0;

    }

    100% {

        opacity: 1

    }
}

@-o-keyframes cover_pic_animation /* Opera */
{
    0%   {

        opacity: 0;

    }

    100% {

        opacity: 1

    }
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_head div.cover div.cover_pic{
        width: 6.8rem;
        height: auto;
        margin: 0 auto;
        background-color: #fefefe;
        background-image: url(../images/zhezhao.png),url(../images/pic_loading.png);
        background-size: cover;
        background-position: center center,center center;
        background-repeat: no-repeat,no-repeat;
        position: relative;

        webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);


        animation: cover_pic_animation .6s ease 0s 1 normal forwards;
        -moz-animation: cover_pic_animation .6s ease 0s 1 normal forwards;
        -webkit-animation: cover_pic_animation .6s ease 0s 1 normal forwards;
        -o-animation: cover_pic_animation .6s ease 0s 1 normal forwards;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_head div.cover p.set_cover{
        width: 100%;
        height: auto;
        display: block;
        text-align: right;

        position: absolute;
        bottom: 5%;
        left: 0%;
        z-index: 100;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_head div.cover p.set_cover img{
        width: 1.44rem;
        height: auto;
        margin-right: .15rem;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_head div.cover p.set_cover i{
        font-style: normal;
        font-weight: normal;
        font-size: .7rem;
        color: #fff;
        vertical-align: middle;
        margin-left: 10px;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_head div.cover div.PictureStory_title{
        width: 100%;
        height: auto;
        text-align: center;
        position: relative;
        padding-top: 10%;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_head div.cover div.PictureStory_title:before{
        content: '';
        width:1.98rem;
        height: 1.4rem;
        line-height: 1;
        font-size: 0;
        background-image: url(../images/bg_title_left.png);
        background-size: 100% auto;
        background-position: bottom left;
        background-repeat: no-repeat;
        position: absolute;
        top: 1.65rem;
        left: 0;
        z-index: 4;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_head div.cover div.PictureStory_title:after{
        content: '';
        width: 2.07rem;
        height: 2.22rem;
        line-height: 1;
        font-size: 0;
        background-image: url(../images/bg_title_right.png);
        background-size: 100% auto;
        background-position: top left;
        background-repeat: no-repeat;
        position: absolute;
        top: 1rem;
        right: 0;
        z-index: 4;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_head div.cover div.title_line_outside{
        width: 100%;
        height: auto;
        line-height: 1;
        font-size: 0;
        padding-top: 3%;
        padding-bottom: 3%;
        background-color: #fefefe;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_head div.cover div.title_line{
        width: 100%;
        height: auto;
        display: block;
        line-height: 1;
        font-size: 0;
        padding-top: 4%;
        background-image: url(../images/bg_scissors.png),url(../images/bg_solid_dotted.png);
        background-size: auto 100%,auto 1px;
        background-position: center center,left center;
        background-repeat: no-repeat,repeat-x;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_head div.cover div.PictureStory_title div.title_img{
        width: 100%;
        height: 200%;
        display: block;
        line-height: 1;
        font-size: 0;
        background-image: url(../images/bg_head.png);
        background-size: 100% auto;
        background-position: top left;
        background-repeat: no-repeat;

        position: absolute;
        top: 0;
        left: 0;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_head div.cover div.PictureStory_title #title{
        width: calc(100% - .6rem);
        height: .5rem;
        display: inline-block;
        font-size: .5rem;
        font-style: normal;
        font-weight: normal;
        text-align: center;
        line-height: 1.3;
        word-spacing: 2px;
        word-wrap: break-word;
        color: #333;
        outline: none;
        border: none;
        margin-top: 2.6rem;

        -webkit-appearance: none;
        background-color: transparent;

        position: relative;
        z-index: 3;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_head div.cover div.PictureStory_title div#title{
        height: auto !important;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_head div.cover div.PictureStory_title #title div{
        line-height: 1.3;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_head div.cover div.PictureStory_title p.set_time{
        width: 100%;
        height: auto;
        text-align: center;
        display: block;
        margin: 0 auto;
        position: relative;
        z-index: 3;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_head div.cover div.PictureStory_title p.set_time:before{
        content: '';
        width: 5.2rem;
        height: .2rem;
        display: block;
        margin: 0 auto;
        margin-bottom: .4rem;

        background-image: url(../images/bg_title_bottom.png);
        background-size: 100% auto;
        background-position: top left;
        background-repeat: no-repeat;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_head div.cover div.PictureStory_title p.set_time img{
        width: .24rem;
        height: auto;
        display: inline-block;
        vertical-align: middle;
        margin-right: .12rem;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_head div.cover div.PictureStory_title p.set_time i.time{
        font-size: .26rem;
        color: #333;
        font-style: normal;
        font-weight: normal;
        vertical-align: middle;
        line-height: 1.4;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess{
        width: 100%;
        height: auto;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul{
        width: 90%;
        height: auto;
        margin: 0 auto;
        padding-bottom: 0.1%;
        position: relative;
        z-index: 3;

        padding-top: 1px;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li{
        width: 90%;
        height: auto;
        margin: 0 auto;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li:first-of-type div.btn_move img.btn_move_up{
        display: none !important;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li:last-of-type div.btn_move img.btn_move_up{
        margin-bottom: 0 !important;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li:last-of-type div.btn_move img.btn_move_down{
        display: none !important;
}

    /*基础格式结束*/



/*图片类样式开始*/

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_pic{
        width: 100%;
        height: auto;
        position: relative;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_pic:before{
        content: '';
        width: 100%;
        height: 1.5rem;
        background-image: url(../images/pic_mp_head.png);
        background-size: 100%;
        background-position: top right;
        background-repeat: no-repeat;
        position: absolute;
        top: -.655rem;
        left: 0;
        z-index: 1;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_pic div.inner_pic{
        width: calc(100% - 12px);
        height: auto;
        line-height: 1;
        font-size: 0;
        margin: 0 auto;
        border: 6px;
        border-style: solid;
        border-image-source: url(../images/bg_pic_border.png);
        border-image-slice: 16 16 16 16;
        border-image-repeat: repeat;

        position: relative;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_pic div.inner_pic img.user_pic{
        width: 100%;
        height: auto;
        border-radius: .1rem;
        line-height: 100%;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_pic div.inner_pic div.btn_move{
        width: .6rem;
        height: auto;
        text-align: center;
        position: absolute;
        bottom: .3rem;
        right: .18rem;
        z-index: 100;
}


div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_pic div.inner_pic div.btn_move img{
        width: 100%;
        height: auto;
        line-height: 1;
        display: block;
        margin-bottom: .3rem;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_pic div.inner_pic div.btn_move img.btn_move_down{
        margin-bottom: 0;

        transform:rotate(180deg);
        -ms-transform:rotate(180deg);     /* IE 9 */
        -moz-transform:rotate(180deg);    /* Firefox */
        -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
        -o-transform:rotate(180deg);  /* Opera */
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_pic div.imformation{
        width: 92%;
        height: auto;
        text-align: left;
        margin: 0 auto;
        padding: 1% 4%;
        line-height: 1;
        display: none;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_pic div.imformation div{
        width: auto;
        height: auto;
        line-height: 1;
        text-align: left;
        display: inline-block;
        font-size: 0;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_pic div.imformation div img{
        width: 12%;
        height: auto;
        display: inline-block;
        vertical-align: middle;
        line-height: 1;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_pic div.imformation div i{
        font-size: .65rem;
        line-height: 1;
        font-weight: normal;
        font-style: normal;
        color: rgba(51,51,51,.5);
        vertical-align: middle;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_pic p{
        width: 92%;
        height: auto;
        text-align: center;
        margin: 0 auto;
        margin-top: 4%;
        padding-right: 3%;
        margin-bottom: 4%;
        padding-left: 3%;
        line-height: 1.2;
        word-wrap : break-word;
        font-size: .24rem;
        color: #fe83a8;
        outline: none;
}

/*div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_pic p:before{
        content: '';
        width: .6rem;
        height: .16rem;
        display: inline-block;
        vertical-align: middle;
        margin-right: .15rem;

        background-image: url(../images/icon_sign.png);
        background-size: 100%;
        background-position: top left;
        background-repeat: no-repeat;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_pic p:after{
        content: '';
        width: .6rem;
        height: .16rem;
        display: inline-block;
        vertical-align: middle;
        margin-left: .15rem;

        background-image: url(../images/icon_sign.png);
        background-size: 100%;
        background-position: top left;
        background-repeat: no-repeat;

        transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -o-transform: rotate(180deg);
}*/

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_pic div{
        line-height: 1.2;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_pic p div{
        line-height: 1.2;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_pic p img{
        width: 3.3%;
        max-width: 20px;
        height: auto;
        vertical-align: middle;
        margin-right: 2.5px;
        border-radius: 0rem;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_pic p i{
        font-size: .24rem;
        color: #fe83a8;
        font-style: normal;
        font-weight: normal;
        margin-left: 2.5px;
        vertical-align: middle;
}

       /* 工具栏（图片类）开始*/
div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_pic div.yinji_templates_PictureStory_tool{
        width: 100%;
        height: auto;
        text-align: left;
        position: absolute;
        top: .3rem;
        z-index: 100;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_pic div.yinji_templates_PictureStory_tool img{
        width: .6rem;
        height: auto;
        line-height: 1;

        webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);

        transition: All 0.45s ease;
        -webkit-transition: All 0.45s ease;
        -moz-transition: All 0.45s ease;
        -o-transition: All 0.45s ease;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_pic div.yinji_templates_PictureStory_tool img.delete{
        margin-left: .3rem;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_pic div.yinji_templates_PictureStory_tool img.cut{
        margin-left: .3rem;
}

       /* 工具栏（图片类）结束*/

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul div.add_newmess{
        width: 100%;
        height: auto;
        text-align: center;
        margin: 0 auto;
        padding: 12% 0;
        position: relative;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul div.add_newmess div.btn_add{
        width: 100%;
        height: auto;
        margin: 0 auto;
        text-align: center;

        webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);

        position: relative;
        z-index: 1;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul div.add_newmess div.btn_add:after{
        content: '';
        width: 100%;
        height: 0;
        display: block;
        background-image: url(../images/bg_add_line.png);
        background-size: auto 100%;
        background-position: bottom center;
        background-repeat: no-repeat;
        position: relative;
        z-index: 1;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul div.add_newmess div.btn_add img{
        width: .48rem;
        height: auto;
        border-radius: 100%;
        border: .03rem solid rgba(117,77,35,1);
        background-color: #ffff87;
        position: relative;
        z-index: 2;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul div.add_newmess div.add_newmess_select{
    width: 0;
    height: auto;
    margin: 0 auto;
    font-size: 0;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul div.add_newmess div.add_newmess_select div.add_pic{
    width: 16%;
    max-width: 72px;
    height: auto;
    display: inline-block;
    line-height: 0%;
    vertical-align: middle;
    margin-right: 18%;
    opacity: 0;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul div.add_newmess div.add_newmess_select div.add_pic:after{
    content: '图片';
    width: 100%;
    height: auto;
    text-align: center;
    font-size: 0rem;
    color: #754d23;
    margin-top: 6%;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul div.add_newmess div.add_newmess_select div.add_pic img{
    width: 100%;
    max-width: 72px;
    height: auto;
    line-height: 100%;
    vertical-align: middle;
    display: block;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul div.add_newmess div.add_newmess_select div.add_text{
    width: 16%;
    max-width: 72px;
    height: auto;
    display: inline-block;
    line-height: 0%;
    vertical-align: middle;
    margin-left: 18%;
    opacity: 0;
    white-space: nowrap;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul div.add_newmess div.add_newmess_select div.add_text:after{
    content: '文字';
    width: 100%;
    height: auto;
    text-align: center;
    font-size: 0rem;
    color: #754d23;
    margin-top: 6%;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul div.add_newmess div.add_newmess_select div.add_text img{
    width: 100%;
    max-width: 72px;
    height: auto;
    line-height: 100%;
    vertical-align: middle;
    display: block;
}

/*图片类样式结束*/



/*文字类样式开始*/

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_text{
        width: 92%;
        height: auto;
        padding-top: 4%;
        padding-right: 4%;
        padding-bottom: 4%;
        padding-left: 4%;

        background-image: url(../images/pic_mt_head.png), url(../images/pic_mt_foot.png);
        background-size: 30% auto;
        background-position: top left, bottom right;
        background-repeat: no-repeat;

        position: relative;
}

        /* 工具栏（文字类）开始*/

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_text div.yinji_templates_PictureStory_tool{
        width: 100%;
        height: auto;
        text-align: left;
        z-index: 100;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_text div.yinji_templates_PictureStory_tool img{
        width: .6rem;
        height: auto;
        line-height: 1;

        webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);

        transition: All 0.45s ease;
        -webkit-transition: All 0.45s ease;
        -moz-transition: All 0.45s ease;
        -o-transition: All 0.45s ease;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_text div.yinji_templates_PictureStory_tool img.delete{
        margin-left: .15rem;
        margin-top: .15rem;
}

        /* 工具栏（文字类）结束*/

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_text p{
        width: 96%;
        height: auto;
        margin: 0 auto;
        padding: 2%;
        padding-bottom: calc(2% + .6rem);
        margin-top: 2%;
        border-radius: .2rem;
        font-size: .32rem;
        font-style: normal;
        font-weight: normal;
        color: #333;
        line-height: 1.5;
        text-align: left;
        word-wrap : break-word;
        word-spacing:4px;
        letter-spacing: 1px;
        outline: none;
        border: none;
        text-align: justify;
        text-justify: distribute;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_text p div{
        line-height: 1.5;     
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_text p.editor_default img{
        width: 3.9%;
        max-width: 20px;
        height: auto;
        vertical-align: middle;
        margin-right: 2.5px;
        margin-left: 4%;
        border-radius: 0rem;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_text p.editor_default i{
        font-size: .24rem;
        color: #fe83a8;
        font-style: normal;
        font-weight: normal;
        margin-left: 2.5px;
        vertical-align: middle;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_text div.btn_move{
        width: .6rem;
        height: 100%;
        text-align: center;
        position: absolute;
        bottom: 0;
        right: .42rem;
        z-index: 100;
}


div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_text div.btn_move img{
        width: 100%;
        height: auto;
        line-height: 1;
        position: absolute;
        right: 0;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_text div.btn_move img.btn_move_up{
        top: .36rem;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul li.mess_text div.btn_move img.btn_move_down{
        bottom: .42rem;

        transform:rotate(180deg);
        -ms-transform:rotate(180deg);     /* IE 9 */
        -moz-transform:rotate(180deg);    /* Firefox */
        -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
        -o-transform:rotate(180deg);  /* Opera */
}

/*文字类样式结束*/

/*基础样式结束*/



/*animation过渡效果开始*/

    /*工具栏入场（编辑状态）开始*/

@keyframes animation_tool
{
    0%   {

        opacity: 0;
        transform:scale(0);

    }
    30%{

        opacity: .1;
        transform:scale(.6);

    }
    60%{

        opacity: 1;
        transform:scale(1.2);

    }
    90%{

        opacity: 1;
        transform:scale(.95);

    }
    100% {

        opacity: 1;
        transform:scale(1);

    }
}

@-moz-keyframes animation_tool /* Firefox */
{
    0%   {

        opacity: 0;
        transform:scale(0);

    }
    30%{

        opacity: .1;
        transform:scale(.6);

    }
    60%{

        opacity: 1;
        transform:scale(1.2);

    }
    90%{

        opacity: 1;
        transform:scale(.95);

    }
    100% {

        opacity: 1;
        transform:scale(1);

    }
}

@-ms-keyframes animation_tool
{
    0%   {

        opacity: 0;
        transform:scale(0);

    }
    30%{

        opacity: .1;
        transform:scale(.6);

    }
    60%{

        opacity: 1;
        transform:scale(1.2);

    }
    90%{

        opacity: 1;
        transform:scale(.95);

    }
    100% {

        opacity: 1;
        transform:scale(1);

    }
}

@-webkit-keyframes animation_tool /* Safari 和 Chrome */
{
    0%   {

        opacity: 0;
        transform:scale(0);

    }
    30%{

        opacity: .1;
        transform:scale(.6);

    }
    60%{

        opacity: 1;
        transform:scale(1.2);

    }
    90%{

        opacity: 1;
        transform:scale(.95);

    }
    100% {

        opacity: 1;
        transform:scale(1);

    }
}

@-o-keyframes animation_tool /* Opera */
{
    0%   {

        opacity: 0;
        transform:scale(0);

    }
    30%{

        opacity: .1;
        transform:scale(.6);

    }
    60%{

        opacity: 1;
        transform:scale(1.2);

    }
    90%{

        opacity: 1;
        transform:scale(.95);

    }
    100% {

        opacity: 1;
        transform:scale(1);

    }
}

    .animation_tool{

        position: relative;

    }

    .animation_tool img.delete{
        opacity: 0;
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);

        animation: animation_tool 0.62s ease .1s 1 normal forwards;
        -moz-animation: animation_tool 0.62s ease .1s 1 normal forwards;
        -webkit-animation: animation_tool 0.62s ease .1s 1 normal forwards;
        -o-animation: animation_tool 0.62s ease .1s 1 normal forwards;
    }

    .animation_tool img.cut{
        opacity: 0;
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);

         animation: animation_tool 0.62s ease .33s 1 normal forwards;
        -moz-animation: animation_tool 0.62s ease .33s 1 normal forwards;
        -webkit-animation: animation_tool 0.62s ease .33s 1 normal forwards;
        -o-animation: animation_tool 0.62s ease .33s 1 normal forwards;       
    }

    /*工具栏入场（编辑状态）结束*/



    /*取消按钮入场（编辑状态）开始*/

@keyframes animation_newmess_select
{
    0%   {
        width: 0;
        height: 0;
        margin-top: 0;
        padding: 0;
    }
    100% {
        width: 4.68rem;
        height: 1.26rem;
        padding-top: .3rem;
        padding-bottom: .2rem;
        margin-top: -.01rem;
    }
}

@-moz-keyframes animation_newmess_select /* Firefox */
{
    0%   {
        width: 0;
        height: 0;
        margin-top: 0;
        padding: 0;
    }
    100% {
        width: 4.68rem;
        height: 1.26rem;
        padding-top: .3rem;
        padding-bottom: .2rem;
        margin-top: -.01rem;
    }
}

@-ms-keyframes animation_newmess_select
{
    0%   {
        width: 0;
        height: 0;
        margin-top: 0;
        padding: 0;
    }
    100% {
        width: 4.68rem;
        height: 1.26rem;
        padding-top: .3rem;
        padding-bottom: .2rem;
        margin-top: -.01rem;
    }
}

@-webkit-keyframes animation_newmess_select /* Safari 和 Chrome */
{
    0%   {
        width: 0;
        height: 0;
        margin-top: 0;
        padding: 0;
    }
    100% {
        width: 4.68rem;
        height: 1.26rem;
        padding-top: .3rem;
        padding-bottom: .2rem;
        margin-top: -.01rem;
    }
}

@-o-keyframes animation_newmess_select /* Opera */
{
    0%   {
        width: 0;
        height: 0;
        margin-top: 0;
        padding: 0;
    }
    100% {
        width: 4.68rem;
        height: 1.26rem;
        padding-top: .3rem;
        padding-bottom: .2rem;
        margin-top: -.01rem;
    }
}

    div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul div.add_ing div.add_newmess_select{
        margin: 0 auto;
        border-radius: .2rem;
        background-image: url(../images/bg_add_newmess.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;

        webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);

        animation: animation_newmess_select .6s ease 0s 1 normal forwards;
        -moz-animation: animation_newmess_select .6s ease 0s 1 normal forwards;
        -webkit-animation: animation_newmess_select .6s ease 0s 1 normal forwards;
        -o-animation: animation_newmess_select .6s ease 0s 1 normal forwards;
    }

@keyframes animation_add_select
{
    0%   {

        opacity: 0;
        line-height: 0%;

    }
    100% {

        opacity: 1;
        line-height: 100%;

    }
}

@-moz-keyframes animation_add_select /* Firefox */
{
    0%   {

        opacity: 0;
        line-height: 0%;

    }
    100% {

        opacity: 1;
        line-height: 100%;

    }
}

@-ms-keyframes animation_add_select
{
    0%   {

        opacity: 0;
        line-height: 0%;

    }
    100% {

        opacity: 1;
        line-height: 100%;

    }
}

@-webkit-keyframes animation_add_select /* Safari 和 Chrome */
{
    0%   {

        opacity: 0;
        line-height: 0%;

    }
    100% {

        opacity: 1;
        line-height: 100%;

    }
}

@-o-keyframes animation_add_select /* Opera */
{
    0%   {

        opacity: 0;
        line-height: 0%;

    }
    100% {

        opacity: 1;
        line-height: 100%;

    }
}

    div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul div.add_ing div.add_newmess_select div.add_pic{
            width: 15%;
            max-width: 72px;
            height: auto;
            display: inline-block;
            vertical-align: middle;
            margin-right: 12%;

            webkit-transform: translate3d(0,0,0);
            -moz-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            -o-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);

            animation: animation_add_select .6s ease .1s 1 normal forwards;
            -moz-animation: animation_add_select .6s ease .1s 1 normal forwards;
            -webkit-animation: animation_add_select .6s ease .1s 1 normal forwards;
            -o-animation: animation_add_select .6s ease .1s 1 normal forwards;
    }

    div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul div.add_ing div.add_newmess_select div.add_pic:after{
            content: '图片';
            width: 100%;
            height: auto;
            text-align: center;
            font-size: .24rem;
            line-height: 100%;
            color: #754d23;
            margin-top: 12%;
            display: block;
            white-space:nowrap;
    }

    div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul div.add_ing div.add_newmess_select div.add_pic img{
            width: 100%;
            max-width: 72px;
            height: auto;
            line-height: 100%;
            vertical-align: middle;
            display: block;
    }

    div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul div.add_ing div.add_newmess_select div.add_text{
            width: 15%;
            max-width: 72px;
            height: auto;
            display: inline-block;
            vertical-align: middle;
            margin-left: 12%;
            white-space: nowrap;

            webkit-transform: translate3d(0,0,0);
            -moz-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            -o-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);

            animation: animation_add_select .6s ease .1s 1 normal forwards;
            -moz-animation: animation_add_select .6s ease .1s 1 normal forwards;
            -webkit-animation: animation_add_select .6s ease .1s 1 normal forwards;
            -o-animation: animation_add_select .6s ease .1s 1 normal forwards;
    }

    div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul div.add_ing div.add_newmess_select div.add_text:after{
            content: '文字';
            width: 100%;
            height: auto;
            text-align: center;
            font-size: .24rem;
            line-height: 100%;
            color: #754d23;
            margin-top: 12%;
            display: block;
            white-space: nowrap;
    }

    div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul div.add_ing div.add_newmess_select div.add_text img{
            width: 100%;
            max-width: 72px;
            height: auto;
            line-height: 100%;
            vertical-align: middle;
            display: block;
    }

@keyframes animation_btn_close
{
    0%   {

        transform:rotate(0deg);

    }
    100% {

        transform:rotate(45deg);

    }
}

@-moz-keyframes animation_btn_close /* Firefox */
{
    0%   {

        transform:rotate(0deg);

    }
    100% {

        transform:rotate(45deg);

    }
}

@-ms-keyframes animation_btn_close
{
    0%   {

        transform:rotate(0deg);

    }
    100% {

        transform:rotate(45deg);

    }
}

@-webkit-keyframes animation_btn_close /* Safari 和 Chrome */
{
    0%   {

        transform:rotate(0deg);

    }
    100% {

        transform:rotate(45deg);

    }
}

@-o-keyframes animation_btn_close /* Opera */
{
    0%   {

        transform:rotate(0deg);

    }
    100% {

        transform:rotate(45deg);

    }
}

    .btn_close{
        webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);

        transition: All 0.45s ease;
        -webkit-transition: All 0.45s ease;
        -moz-transition: All 0.45s ease;
        -o-transition: All 0.45s ease;
    }

@keyframes animation_close_after
{
    0%   {
        height: 0;
        margin-top: 0;
    }
    100% {
        height: .52rem;
        margin-top: -.2rem;
    }
}

@-moz-keyframes animation_close_after /* Firefox */
{
    0%   {
        height: 0;
        margin-top: 0;
    }
    100% {
        height: .52rem;
        margin-top: -.2rem;
    }
}

@-ms-keyframes animation_close_after
{
    0%   {
        height: 0;
        margin-top: 0;
    }
    100% {
        height: .52rem;
        margin-top: -.2rem;
    }
}

@-webkit-keyframes animation_close_after /* Safari 和 Chrome */
{
    0%   {
        height: 0;
        margin-top: 0;
    }
    100% {
        height: .52rem;
        margin-top: -.2rem;
    }
}

@-o-keyframes animation_close_after /* Opera */
{
    0%   {
        height: 0;
        margin-top: 0;
    }
    100% {
        height: .52rem;
        margin-top: -.2rem;
    }
}

    .btn_close:after{
        webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);

        animation: animation_close_after .45s ease 0s 1 normal forwards;
        -moz-animation: animation_close_after .45s ease 0s 1 normal forwards;
        -webkit-animation: animation_close_after .45s ease 0s 1 normal forwards;
        -o-animation: animation_close_after .45s ease 0s 1 normal forwards;
    }

    .btn_close img{
        webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);

        animation: animation_btn_close .45s ease 0s 1 normal forwards;
        -moz-animation: animation_btn_close .45s ease 0s 1 normal forwards;
        -webkit-animation: animation_btn_close .45s ease 0s 1 normal forwards;
        -o-animation: animation_btn_close .45s ease 0s 1 normal forwards;
    }

    /*取消按钮入场（编辑状态）结束*/



    /*取消按钮离场（编辑状态）开始*/

@keyframes animation_newmess_select_ed
{
    0%   {
        width: 50%;
        height: auto;
        padding: 6% 0%;
    }
    100% {
        width: 0%;
        height: auto;
        padding: 0%;
    }
}

@-moz-keyframes animation_newmess_select_ed /* Firefox */
{
    0%   {
        width: 50%;
        height: auto;
        padding: 6% 0%;
    }
    100% {
        width: 0%;
        height: auto;
        padding: 0%;
    }
}

@-ms-keyframes animation_newmess_select_ed
{
    0%   {
        width: 50%;
        height: auto;
        padding: 6% 0%;
    }
    100% {
        width: 0%;
        height: auto;
        padding: 0%;
    }
}

@-webkit-keyframes animation_newmess_select_ed /* Safari 和 Chrome */
{
    0%   {
        width: 50%;
        height: auto;
        padding: 6% 0%;
    }
    100% {
        width: 0%;
        height: auto;
        padding: 0%;
    }
}

@-o-keyframes animation_newmess_select_ed /* Opera */
{
    0%   {
        width: 50%;
        height: auto;
        padding: 6% 0%;
    }
    100% {
        width: 0%;
        height: auto;
        padding: 0%;
    }
}

    .add_ed{

    }

    div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul div.add_ed div.add_newmess_select{
            margin: 0 auto;
            border-radius: 0rem;

            webkit-transform: translate3d(0,0,0);
            -moz-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            -o-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0); 

            animation: animation_newmess_select_ed .6s ease 0s 1 normal forwards;
            -moz-animation: animation_newmess_select_ed .6s ease 0s 1 normal forwards;
            -webkit-animation: animation_newmess_select_ed .6s ease 0s 1 normal forwards;
            -o-animation: animation_newmess_select_ed .6s ease 0s 1 normal forwards;
    }

@keyframes animation_add_select_ed
{
    0%   {

        opacity: 1;
        line-height: 100%;

    }
    100% {

        opacity: 0;
        line-height: 0%;

    }
}

@-moz-keyframes animation_add_select_ed /* Firefox */
{
    0%   {

        opacity: 1;
        line-height: 100%;

    }
    100% {

        opacity: 0;
        line-height: 0%;

    }
}

@-ms-keyframes animation_add_select_ed
{
    0%   {

        opacity: 1;
        line-height: 100%;

    }
    100% {

        opacity: 0;
        line-height: 0%;

    }
}

@-webkit-keyframes animation_add_select_ed /* Safari 和 Chrome */
{
    0%   {

        opacity: 1;
        line-height: 100%;

    }
    100% {

        opacity: 0;
        line-height: 0%;

    }
}

@-o-keyframes animation_add_select_ed /* Opera */
{
    0%   {

        opacity: 1;
        line-height: 100%;

    }
    100% {

        opacity: 0;
        line-height: 0%;

    }
}

    div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul div.add_ed div.add_newmess_select div.add_pic{
            width: 16%;
            max-width: 72px;
            height: auto;
            display: inline-block;
            vertical-align: middle;
            margin-right: 18%;

            webkit-transform: translate3d(0,0,0);
            -moz-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            -o-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);

            animation: animation_add_select_ed .35s ease 0s 1 normal forwards;
            -moz-animation: animation_add_select_ed .35s ease 0s 1 normal forwards;
            -webkit-animation: animation_add_select_ed .35s ease 0s 1 normal forwards;
            -o-animation: animation_add_select_ed .35s ease 0s 1 normal forwards;
    }

@keyframes animation_add_text_ed
{
    0%   {
        font-size: .24rem;
    }
    100% {
        font-size: 0rem;
    }
}

@-moz-keyframes animation_add_text_ed /* Firefox */
{
    0%   {
        font-size: .24rem;
    }
    100% {
        font-size: 0rem;
    }
}

@-ms-keyframes animation_add_text_ed
{
    0%   {
        font-size: .24rem;
    }
    100% {
        font-size: 0rem;
    }
}

@-webkit-keyframes animation_add_text_ed /* Safari 和 Chrome */
{
    0%   {
        font-size: .24rem;
    }
    100% {
        font-size: 0rem;
    }
}

@-o-keyframes animation_add_text_ed /* Opera */
{
    0%   {
        font-size: .24rem;
    }
    100% {
        font-size: 0rem;
    }
}

    div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul div.add_ed div.add_newmess_select div.add_pic:after{
            content: '图片';
            width: 100%;
            height: auto;
            text-align: center;
            color: #3c777e;
            margin-top: 6%;
            display: inline-block;
            opacity: 0;

            webkit-transform: translate3d(0,0,0);
            -moz-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            -o-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);

            animation: animation_add_text_ed .35s ease 0s 1 normal forwards;
            -moz-animation: animation_add_text_ed .35s ease 0s 1 normal forwards;
            -webkit-animation: animation_add_text_ed .35s ease 0s 1 normal forwards;
            -o-animation: animation_add_text_ed .35s ease 0s 1 normal forwards;
    }

    div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul div.add_ed div.add_newmess_select div.add_pic img{
            width: 100%;
            max-width: 72px;
            height: auto;
            line-height: 100%;
            vertical-align: middle;
            display: block;
    }

    div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul div.add_ed div.add_newmess_select div.add_text{
            width: 16%;
            max-width: 72px;
            height: auto;
            display: inline-block;
            vertical-align: middle;
            margin-left: 18%;
            white-space: nowrap;

            webkit-transform: translate3d(0,0,0);
            -moz-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            -o-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);

            animation: animation_add_select_ed .35s ease 0s 1 normal forwards;
            -moz-animation: animation_add_select_ed .35s ease 0s 1 normal forwards;
            -webkit-animation: animation_add_select_ed .35s ease 0s 1 normal forwards;
            -o-animation: animation_add_select_ed .35s ease 0s 1 normal forwards;
    }

    div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul div.add_ed div.add_newmess_select div.add_text:after{
            content: '文字';
            width: 100%;
            height: auto;
            text-align: center;
            color: #3c777e;
            margin-top: 6%;
            display: inline-block;
            opacity: 0;

            webkit-transform: translate3d(0,0,0);
            -moz-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            -o-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);

            animation: animation_add_text_ed .35s ease 0s 1 normal forwards;
            -moz-animation: animation_add_text_ed .35s ease 0s 1 normal forwards;
            -webkit-animation: animation_add_text_ed .35s ease 0s 1 normal forwards;
            -o-animation: animation_add_text_ed .35s ease 0s 1 normal forwards;
    }

    div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_mess ul div.add_ed div.add_newmess_select div.add_text img{
            width: 100%;
            max-width: 72px;
            height: auto;
            line-height: 100%;
            vertical-align: middle;
            display: block;
    }

@keyframes animation_btn_close_ed
{
    0%   {

        transform:rotate(45deg);

    }
    100% {

        transform:rotate(0deg);

    }
}

@-moz-keyframes animation_btn_close_ed /* Firefox */
{
    0%   {

        transform:rotate(45deg);

    }
    100% {

        transform:rotate(0deg);

    }
}

@-ms-keyframes animation_btn_close_ed
{
    0%   {

        transform:rotate(45deg);

    }
    100% {

        transform:rotate(0deg);

    }
}

@-webkit-keyframes animation_btn_close_ed /* Safari 和 Chrome */
{
    0%   {

        transform:rotate(45deg);

    }
    100% {

        transform:rotate(0deg);

    }
}

@-o-keyframes animation_btn_close_ed /* Opera */
{
    0%   {

        transform:rotate(45deg);

    }
    100% {

        transform:rotate(0deg);

    }
}

    .btn_open{
        webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);

        transition: All 0.45s ease;
        -webkit-transition: All 0.45s ease;
        -moz-transition: All 0.45s ease;
        -o-transition: All 0.45s ease;
    }

@keyframes animation_open_after
{
    0%   {
        height: .52rem;
        margin-top: -.2rem;
    }
    100% {
        height: 0;
        margin-top: 0;
    }
}

@-moz-keyframes animation_open_after /* Firefox */
{
    0%   {
        height: .52rem;
        margin-top: -.2rem;
    }
    100% {
        height: 0;
        margin-top: 0;
    }
}

@-ms-keyframes animation_open_after
{
    0%   {
        height: .52rem;
        margin-top: -.2rem;
    }
    100% {
        height: 0;
        margin-top: 0;
    }
}

@-webkit-keyframes animation_open_after /* Safari 和 Chrome */
{
    0%   {
        height: .52rem;
        margin-top: -.2rem;
    }
    100% {
        height: 0;
        margin-top: 0;
    }
}

@-o-keyframes animation_open_after /* Opera */
{
    0%   {
        height: .52rem;
        margin-top: -.2rem;
    }
    100% {
        height: 0;
        margin-top: 0;
    }
}

    .btn_open:after{
        opacity: 0;
        webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);

        animation: animation_open_after .45s ease 0s 1 normal forwards;
        -moz-animation: animation_open_after .45s ease 0s 1 normal forwards;
        -webkit-animation: animation_open_after .45s ease 0s 1 normal forwards;
        -o-animation: animation_open_after .45s ease 0s 1 normal forwards;
    }

    .btn_open img{
        webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);

        animation: animation_btn_close_ed .45s ease 0s 1 normal forwards;
        -moz-animation: animation_btn_close_ed .45s ease 0s 1 normal forwards;
        -webkit-animation: animation_btn_close_ed .45s ease 0s 1 normal forwards;
        -o-animation: animation_btn_close_ed .45s ease 0s 1 normal forwards;
    }

    /*取消按钮离场（编辑状态）结束*/

    /*删除内容入场（编辑状态）开始*/

@keyframes delete_usermess_animation
{
    0%   {
        opacity: 1;
    }
    60%{
        opacity: 0;
    }
    100% {
        width: 0;
        height: 0;
        min-width: 0;
        min-height: 0;
        opacity: 0;
        padding: 0;
    }
}

@-moz-keyframes delete_usermess_animation /* Firefox */
{
    0%   {
        opacity: 1;
    }
    60%{
        opacity: 0;
    }
    100% {
        width: 0;
        height: 0;
        min-width: 0;
        min-height: 0;
        opacity: 0;
        padding: 0;
    }
}

@-ms-keyframes delete_usermess_animation
{
    0%   {
        opacity: 1;
    }
    60%{
        opacity: 0;
    }
    100% {
        width: 0;
        height: 0;
        min-width: 0;
        min-height: 0;
        opacity: 0;
        padding: 0;
    }
}

@-webkit-keyframes delete_usermess_animation /* Safari 和 Chrome */
{
    0%   {
        opacity: 1;
    }
    60%{
        opacity: 0;
    }
    100% {
        width: 0;
        height: 0;
        min-width: 0;
        min-height: 0;
        opacity: 0;
        padding: 0;
    }
}

@-o-keyframes delete_usermess_animation /* Opera */
{
    0%   {
        opacity: 1;
    }
    60%{
        opacity: 0;
    }
    100% {
        width: 0;
        height: 0;
        min-width: 0;
        min-height: 0;
        opacity: 0;
        padding: 0;
    }
}

    .delete_usermess_animation{
        overflow: hidden !important;
        white-space:nowrap !important;
        font-size: 0;

        webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);

        animation: delete_usermess_animation .45s ease 0s 1 normal forwards;
        -moz-animation: delete_usermess_animation .45s ease 0s 1 normal forwards;
        -webkit-animation: delete_usermess_animation .45s ease 0s 1 normal forwards;
        -o-animation: delete_usermess_animation .45s ease 0s 1 normal forwards;    

    }

    .delete_usermess_animation:before{
        height: 0 !important;
    }

    .delete_usermess_animation div{
        font-size: 0;
    }

@keyframes delete_usermess_animation_tool
{
    0%   {
        width: .6rem;
        opacity: 1;
    }
    60%{
        opacity: 0;
    }
    100% {
        width: 0;
        opacity: 0;
    }
}

@-moz-keyframes delete_usermess_animation_tool /* Firefox */
{
    0%   {
        width: .6rem;
        opacity: 1;
    }
    60%{
        opacity: 0;
    }
    100% {
        width: 0;
        opacity: 0;
    }
}

@-ms-keyframes delete_usermess_animation_tool
{
    0%   {
        width: .6rem;
        opacity: 1;
    }
    60%{
        opacity: 0;
    }
    100% {
        width: 0;
        opacity: 0;
    }
}

@-webkit-keyframes delete_usermess_animation_tool /* Safari 和 Chrome */
{
    0%   {
        width: .6rem;
        opacity: 1;
    }
    60%{
        opacity: 0;
    }
    100% {
        width: 0;
        opacity: 0;
    }
}

@-o-keyframes delete_usermess_animation_tool /* Opera */
{
    0%   {
        width: .6rem;
        opacity: 1;
    }
    60%{
        opacity: 0;
    }
    100% {
        width: 0;
        opacity: 0;
    }
}

    .delete_usermess_animation div.yinji_templates_PictureStory_tool img{
        webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);

        animation: delete_usermess_animation_tool .45s linear 0s 1 normal forwards;
        -moz-animation: delete_usermess_animation_tool .45s linear 0s 1 normal forwards;
        -webkit-animation: delete_usermess_animation_tool .45s linear 0s 1 normal forwards;
        -o-animation: delete_usermess_animation_tool .45s linear 0s 1 normal forwards;    
    }

    .delete_usermess_animation div.btn_move{
        display: none !important;
    }

    .delete_usermess_animation div{
        font-size: 0;
    }

    .delete_usermess_animation p{
        white-space:normal !important;
        min-height: 0 !important;
    }

    .delete_usermess_animation p i{
        white-space: nowrap;
        font-size: 0 !important;
    }

    .delete_usermess_animation p img{
    
    }

@keyframes delete_newmess_animation_p
{
    0%   {

        opacity: 1;
        line-height: 1.5;
        font-size: .24rem;

    }
    100% {

        opacity: 0;
        line-height: 0;
        font-size: 0rem;

    }
}

@-moz-keyframes delete_newmess_animation_p /* Firefox */
{
    0%   {

        opacity: 1;
        line-height: 1.5;
        font-size: .24rem;

    }
    100% {

        opacity: 0;
        line-height: 0;
        font-size: 0rem;

    }
}

@-ms-keyframes delete_newmess_animation_p
{
    0%   {

        opacity: 1;
        line-height: 1.5;
        font-size: .24rem;

    }
    100% {

        opacity: 0;
        line-height: 0;
        font-size: 0rem;

    }
}

@-webkit-keyframes delete_newmess_animation_p /* Safari 和 Chrome */
{
    0%   {

        opacity: 1;
        line-height: 1.5;
        font-size: .24rem;

    }
    100% {

        opacity: 0;
        line-height: 0;
        font-size: 0rem;

    }
}

@-o-keyframes delete_newmess_animation_p /* Opera */
{
    0%   {

        opacity: 1;
        line-height: 1.5;
        font-size: .24rem;

    }
    100% {

        opacity: 0;
        line-height: 0;
        font-size: 0rem;

    }
}

    .delete_usermess_animation p{
        min-height: 0 !important;

        webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);

        animation: delete_newmess_animation_p .45s ease 0s 1 normal forwards;
        -moz-animation: delete_newmess_animation_p .45s ease 0s 1 normal forwards;
        -webkit-animation: delete_newmess_animation_p .45s ease 0s 1 normal forwards;
        -o-animation: delete_newmess_animation_p .45s ease 0s 1 normal forwards;             
    }

    .delete_usermess_animation p i{
        white-space: nowrap;
        line-height: 100%;

        webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);

        animation: delete_newmess_animation_p .45s ease 0s 1 normal forwards;
        -moz-animation: delete_newmess_animation_p .45s ease 0s 1 normal forwards;
        -webkit-animation: delete_newmess_animation_p .45s ease 0s 1 normal forwards;
        -o-animation: delete_newmess_animation_p .45s ease 0s 1 normal forwards;         
    }

    .delete_usermess_animation p img{
        webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);

        animation: delete_newmess_animation_p .45s ease 0s 1 normal forwards;
        -moz-animation: delete_newmess_animation_p .45s ease 0s 1 normal forwards;
        -webkit-animation: delete_newmess_animation_p .45s ease 0s 1 normal forwards;
        -o-animation: delete_newmess_animation_p .45s ease 0s 1 normal forwards;          
    }

        /*删除相对应新建按钮（编辑状态）开始*/

@keyframes delete_newmess_animation
{
    0%   {

        width: 100%;
        opacity: 1;
        padding: 12% 0;

    }
    100% {

        width: 0%;
        opacity: 0;
        padding: 0;

    }
}

@-moz-keyframes delete_newmess_animation /* Firefox */
{
    0%   {

        width: 100%;
        opacity: 1;
        padding: 12% 0;

    }
    100% {

        width: 0%;
        opacity: 0;
        padding: 0;

    }
}

@-ms-keyframes delete_newmess_animation
{
    0%   {

        width: 100%;
        opacity: 1;
        padding: 12% 0;

    }
    100% {

        width: 0%;
        opacity: 0;
        padding: 0;

    }
}

@-webkit-keyframes delete_newmess_animation /* Safari 和 Chrome */
{
    0%   {

        width: 100%;
        opacity: 1;
        padding: 12% 0;

    }
    100% {

        width: 0%;
        opacity: 0;
        padding: 0;

    }
}

@-o-keyframes delete_newmess_animation /* Opera */
{
    0%   {

        width: 100%;
        opacity: 1;
        padding: 12% 0;

    }
    100% {

        width: 0%;
        opacity: 0;
        padding: 0;

    }
}

    .delete_newmess_animation{
        webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);

        animation: delete_newmess_animation .45s ease 0s 1 normal forwards;
        -moz-animation: delete_newmess_animation .45s ease 0s 1 normal forwards;
        -webkit-animation: delete_newmess_animation .45s ease 0s 1 normal forwards;
        -o-animation: delete_newmess_animation .45s ease 0s 1 normal forwards;              
    }

    .delete_newmess_animation div{
        font-size: 0;
    }

    .delete_newmess_animation img{
        display: none !important;
    }

        /*删除相对应新建按钮（编辑状态）结束*/

    /*删除内容入场（编辑状态）结束*/


    /*新建文字入场（编辑状态）开始*/

@keyframes add_newmess_animation
{
    0%   {

        opacity: 0;

    }
    100% {

        opacity: 1;

    }
}

@-moz-keyframes add_newmess_animation /* Firefox */
{
    0%   {

        opacity: 0;

    }
    100% {

        opacity: 1;

    }
}

@-ms-keyframes add_newmess_animation
{
    0%   {

        opacity: 0;

    }
    100% {

        opacity: 1;

    }
}

@-webkit-keyframes add_newmess_animation /* Safari 和 Chrome */
{
    0%   {

        opacity: 0;

    }
    100% {

        opacity: 1;

    }
}

@-o-keyframes add_newmess_animation /* Opera */
{
    0%   {

        opacity: 0;

    }
    100% {

        opacity: 1;

    }
}

    .add_newmess_animation{
        opacity: 0;

        webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);

        animation: add_newmess_animation .45s ease 0s 1 normal forwards;
        -moz-animation: add_newmess_animation .45s ease 0s 1 normal forwards;
        -webkit-animation: add_newmess_animation .45s ease 0s 1 normal forwards;
        -o-animation: add_newmess_animation .45s ease 0s 1 normal forwards;
    }

@keyframes add_newmess_animation_p
{
    0%   {

        opacity: 0;

    }
    100% {

        opacity: 1;

    }
}

@-moz-keyframes add_newmess_animation_p /* Firefox */
{
    0%   {

        opacity: 0;

    }
    100% {

        opacity: 1;

    }
}

@-ms-keyframes add_newmess_animation_p
{
    0%   {

        opacity: 0;

    }
    100% {

        opacity: 1;

    }
}

@-webkit-keyframes add_newmess_animation_p /* Safari 和 Chrome */
{
    0%   {

        opacity: 0;

    }
    100% {

        opacity: 1;

    }
}

@-o-keyframes add_newmess_animation_p /* Opera */
{
    0%   {

        opacity: 0;

    }
    100% {

        opacity: 1;

    }
}

    .add_newmess_animation p i{
        white-space: nowrap;
        line-height: 100%;

        webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);

        animation: add_newmess_animation_p .45s ease .3s 1 normal forwards;
        -moz-animation: add_newmess_animation_p .45s ease .3s 1 normal forwards;
        -webkit-animation: add_newmess_animation_p .45s ease .3s 1 normal forwards;
        -o-animation: add_newmess_animation_p .45s ease .3s 1 normal forwards;         
    }

    .add_newmess_animation p img{
        webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);

         animation: add_newmess_animation_p .45s ease .3s 1 normal forwards;
        -moz-animation: add_newmess_animation_p .45s ease .3s 1 normal forwards;
        -webkit-animation: add_newmess_animation_p .45s ease .3s 1 normal forwards;
        -o-animation: add_newmess_animation_p .45s ease .3s 1 normal forwards;          
    }

    /*新建文字入场（编辑状态）结束*/

/*animation过渡效果结束*/

/*移动功能样式（编辑状态）开始*/

@keyframes li_move
{
    0%   {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-moz-keyframes li_move /* Firefox */
{
    0%   {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-ms-keyframes li_move
{
    0%   {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes li_move /* Safari 和 Chrome */
{
    0%   {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-o-keyframes li_move /* Opera */
{
    0%   {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.li_move{
    opacity: 0;
    animation: li_move 0s linear 0s 1 normal forwards !important;
    -moz-animation: li_move 0s linear 0s 1 normal forwards !important;
    -webkit-animation: li_move 0s linear 0s 1 normal forwards !important;
    -o-animation: li_move 0s linear 0s 1 normal forwards !important;
}

.li_clon{
    z-index: 1000;
}

.li_clon div.btn_move{
    display: none !important;
}

/*移动功能样式（编辑状态）结束*/

/*浏览状态开始(浏览状态下，DIV：yinji_templates_PictureStory_box 添加新class：PictureStory_view_box)*/

.PictureStory_view_box{
    background-color: #fefefe !important;
}

div.PictureStory_view_box div.yinji_templates_PictureStory_head{
    margin-top: 0 !important;
    margin-bottom: 6% !important;
}

div.PictureStory_view_box div.yinji_templates_PictureStory_head div.cover:before{
    display: none !important;
}

div.PictureStory_view_box div.yinji_templates_PictureStory_head div.cover div.cover_pic{
    display: none !important;
}

div.PictureStory_view_box div.yinji_templates_PictureStory_head div.cover div.title_line_outside{
    display: none !important;
}

div.PictureStory_view_box div.yinji_templates_PictureStory_head div.cover div.PictureStory_title div.title_top_pic{
    margin: 0 !important;
}

div.PictureStory_view_box div.yinji_templates_PictureStory_head div.cover div.PictureStory_title div.title{
    margin-top: 2.6rem;
}

div.PictureStory_view_box div.yinji_templates_PictureStory_head div.cover div.PictureStory_title p.set_time{
    border: none;
    padding: 0;
    margin-top: 3%;
	font-size: 0;
}

div.PictureStory_view_box div.yinji_templates_PictureStory_head div.cover div.PictureStory_title p.set_time i.time{
    width: 100%;
    height: auto;
    font-style: normal;
    font-weight: normal;
    margin: 0;
    text-align: center;
}

div.PictureStory_view_box div.yinji_templates_PictureStory_head div.cover p.set_cover{
    display: none !important;
}

div.PictureStory_view_box div.yinji_templates_PictureStory_head div.head_bottom{
    display: none !important;
}

div.PictureStory_view_box div.yinji_templates_PictureStory_mess ul{
    padding-top: 10%;
    padding-bottom: 10%;
}

div.PictureStory_view_box div.yinji_templates_PictureStory_mess ul li.mess_pic div.yinji_templates_PictureStory_tool{
    display: none !important;
}

div.PictureStory_view_box div.yinji_templates_PictureStory_mess ul li.mess_pic p{
    padding: 4% 4% 0% 4%;
}

div.PictureStory_view_box div.yinji_templates_PictureStory_mess ul li.mess_pic .editor_default{
    display: none !important;
}

div.PictureStory_view_box div.yinji_templates_PictureStory_mess ul li.mess_pic p img{
    display: none !important;
}

div.PictureStory_view_box div.yinji_templates_PictureStory_mess ul li.mess_pic p i{
    display: none !important;
}

div.PictureStory_view_box div.yinji_templates_PictureStory_mess ul div.add_newmess{
    display: none !important;
}

div.PictureStory_view_box div.yinji_templates_PictureStory_mess ul li{
    margin-bottom: .6rem  !important;
}

div.PictureStory_view_box div.yinji_templates_PictureStory_mess ul li.mess_text{
    margin-bottom: 1.42rem  !important;
}

div.PictureStory_view_box div.yinji_templates_PictureStory_mess ul li.mess_text div.yinji_templates_PictureStory_tool{
    display: none !important;
}

div.PictureStory_view_box div.yinji_templates_PictureStory_mess ul li.mess_text{
    width: 94% !important;
    background-color: transparent !important;
}

div.PictureStory_view_box div.yinji_templates_PictureStory_mess ul li.mess_text p{
    width: 96%;
    height: auto;
    margin: 0 auto;
    padding-top: 4%;
    padding-right: 2%;
    padding-bottom: 4%;
    border-left: 2%;
}

div.PictureStory_view_box div.yinji_templates_PictureStory_mess ul li.mess_text p img{
    display: none !important;
}

div.PictureStory_view_box div.yinji_templates_PictureStory_mess ul li.mess_text p i{
    display: none !important;
}

div.PictureStory_view_box .btn_move{
    display: none !important;
}

/*浏览状态结束*/

/*分享水印开始*/

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_bottom{
    width: 100%;
    height: auto;
    text-align: right;
}

div.yinji_templates_PictureStory_box div.yinji_templates_PictureStory_bottom img.pic_bottom{
    width: 100%;
    height: auto;
    line-height: 1;
    font-size: 0;
}

.defoult{
    width: 40%;
    max-width: 150px;
    margin-top: 3%;
    margin-bottom: 3%;
    display:none;
}

/*分享水印结束*/

/*多分辨率适配开始（需要对素材做多分辨率的适配，适配单位的优先级：% > rem > px）*/

@media screen and (max-width: 360px){



}

@media screen and (min-width: 360px) and (max-width: 375px){  /*Android:720*1280px*/



}

@media screen and (min-width: 375px) and (max-width: 380px){    /*Iphone:750*1334px*/



}

@media screen and (min-width: 380px) and (max-width: 480px){



}

@media screen and (min-width: 480px) and (max-width: 720px){



}

@media screen and (min-width: 720px){



}

/*多分辨率适配结束*/
